<template>
  <div id="home">
    <el-container>
      <el-header>
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <div class="grid-content "><a href=# @click="centerDialogVisible=true"><img
                src="../../public/collection.png" height="23"
                width="25"/>收藏萌趣</a>
              <!--收藏页面失败-->
              <el-dialog
                  title="提示"
                  :visible.sync="centerDialogVisible"
                  width="30%"
                  center>
                <span>加入收藏失败，请使用Ctrl+D进行添加</span>
                <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
              </el-dialog>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              <i class="el-icon-s-unfold" style="color: grey">
                <el-link href="/" target="_self">首页</el-link>&ensp;
                <el-link type="primary">登录</el-link>&ensp;
                <el-link type="info">注册</el-link>&ensp;
                <el-link type="warning" @click="drawer = true">关注萌趣
                </el-link>&ensp;
                <el-drawer
                    :visible.sync="drawer"
                    :with-header="false">
                  <span style="color: #2c3e50;font-family: 幼圆;font-size: 35px;line-height: 100px">感谢您关注萌趣宠物官微</span>
                  <span><img src="../../public/guanwei.png"></span>
                  <span><img src="../../public/dog1.gif" style="width: 400px"></span>
                </el-drawer>
                <el-link type="danger" @click="dialogTableVisible = true">收藏商品</el-link>
                <!-- 收藏商品表单-->
                <el-dialog title="收藏商品列表" :visible.sync="dialogTableVisible">
                  <el-table :data="gridData">
                    <el-table-column property="date" label="日期" width="150"></el-table-column>
                    <el-table-column property="name" label="商品名称" width="200"></el-table-column>
                    <el-table-column property="image" label="商品图片"></el-table-column>
                    <el-table-column property="price" label="商品价格"></el-table-column>
                  </el-table>
                </el-dialog>
              </i>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main id="imain">
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <div class="grid-content ">
              <img src="../../public/logo.png" height="92.53" width="100"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              <el-row>
                <el-col><img src="../../public/title.png" height="48.24" width="500"/></el-col>
                <el-row>
                  <el-col>
                    <el-input v-model="input" type="text" prefix-icon="el-icon-search"
                              placeholder="请输入搜索商品" clearable class="search_s">
                      <el-button slot="append" @click="search()" v-model="wd" id="isearch">搜索</el-button>
                    </el-input>
                  </el-col>
                </el-row>
              </el-row>
              <el-row id="isearch1">热门搜索：<a href="主粮">主粮</a> <a href="猫砂">猫砂</a> <a href="玩具">玩具</a> <a
                  href="零食">零食</a> <a href="美容">美容</a></el-row>
            </div>
          </el-col>
          <el-col :offset="2" :span="5" id="iimage">
            <br><br><br>&emsp;&emsp;&emsp;客服电话：400-889-1919
          </el-col>
        </el-row>
      </el-main>
      <!--主体 -->
      <el-main class="layout-main">
        <router-view/>
      </el-main>
    </el-container>
    <div class="el-backtop" style="right:80px;bottom:150px;">
      <a href="#top" target="_self"><i class="el-icon-caret-top"></i></a>
    </div>
    <div class="t-right-bar">
      <div class="t-bar-support" data-open-online-form><a href="购物车链接"> 购物车</a></div>
    </div>
  </div>
</template>
<style>
.t-right-bar {
  position: fixed;
  right: 0;
  bottom: 10%;
  width: 48px;
  height: 48px;
  z-index: 1000;
  cursor: pointer;
}

.t-right-bar > div {
  float: left;
  height: 36px;
  margin-bottom: 1px;
  border-radius: 20px 0 0 20px;
  color: #fff;
  padding-left: 100%;
  clear: both;
  white-space: nowrap;
  font-size: 13px;
  line-height: 36px;
  font-style: normal;
  background-color: cyan;
  background-repeat: no-repeat;
  background-position: 12px center;
  transition: transform .2s cubic-bezier(.215, .61, .355, 1), padding .2s cubic-bezier(.215, .61, .355, 1), margin .2s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.215, .61, .355, 1)
}

.t-bar-support {
  background-image: url("../../public/R-C.png");
  background-size: 30px;
}

.t-right-bar > div.active, .t-right-bar > div:hover {
  transform: translateX(-100%);
  padding-left: 45px;
  padding-right: 10px;
  margin-left: 48px;
  background-color: #23a0e1;
  text-decoration: none;
  color: #fff
}

.t-right-bar .t-bar-support {
  background-position: 14px center;
}

.t-bar-support a {
  color: white;
}

.t-bar-support a:hover {
  color: #fff
}

.el-backtop {
  position: fixed;
  background-color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .12);
  cursor: pointer;
  z-index: 5;
}

.el-backtop > a > i {
  color: #409eff;
}

.el-header {
  background-color: #B3C0D1; /*顶部颜色*/
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;
}

.el-main {
  /* background-color: #E9EEF3;*//*搜索栏及logo背景颜色*/
  color: #333;
  text-align: center;
  line-height: 160px;
  line-height: 30px;
  padding: 0;
}

.grid-content {
  min-height: 36px;
}

/*搜索框*/
.search_s {
  border: 5px solid deepskyblue;
  border-radius: 5px;
}

#isearch {
  background-color: #666666;
  color: azure;
  font-family: 幼圆;
  font-size: 18px;
  margin-right: -24px;
  border: 3px solid deepskyblue;
}

#isearch:hover {
  background-color: deeppink;
}

/*热门搜索*/
#isearch1, #isearch1 > a {
  text-decoration: none;
  color: grey;
  font-size: 13px;
}

#imain {
  background: bisque;
  padding-top: 80px;
}

/*客服电话*/
#iimage {
  font-family: 幼圆;
  color: deeppink;
  font-size: 18px;
}

a {
  text-decoration: none;
  color: black;
}
</style>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data() {
    return {
      wd: [],
      input:[],
      centerDialogVisible: false,
      drawer: false,
      name: 'HomeView',
      components: {
        HelloWorld
      },
      /*收藏商品表单*/
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        image: '',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        image: '',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        image: '',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        image: '',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false,
      /*表单结束*/
    };
  },
  methods: {
    search() {
      location.href = "/sys-admin/temp/result" + wd;
    },
  }
};
</script>
